<template>
    <div>
        <el-form-item label="选择落地:" style="margin-left: 20px;">
            <el-select v-model="fall" placeholder="请选择" @change="getFallData" filterable>
                <el-option v-for="item in fallGroup" :key="item.value + item.label" :label="item.label" :value="item.label">
                    <span style="float: left">{{ item.label }}</span>
                </el-option>
            </el-select>
            <el-button type="primary" @click="getAllUseTiems" style="margin-left: 20px;" :disabled="refreshBt"><el-icon>
                    <Refresh />
                </el-icon>
                刷新</el-button>
        </el-form-item>

        <el-table :data="tableData" v-loading="loading" style="width: 100%;height:60vh" stripe>
            <el-table-column type="index" width="80" label="序号" align="center" />
            <el-table-column prop="fall" label="落地" align="center" />
            <el-table-column prop="value" label="号码" align="center" />
            <el-table-column prop="score" label="使用次数" align="center" />
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getUseTimes } from "@/api/bussiness/numberA"
import {
    Refresh
} from '@element-plus/icons-vue'
onMounted(() => {
    getAllUseTiems()
})
const refreshBt = ref(true)
const loading = ref(false)
const fall = ref<string>('')
const tableData = ref([])
const tableDataCopy = ref([])
const fallGroup = ref([])
const getFallData = () => {
    tableData.value = tableDataCopy.value
    tableData.value = tableData.value.filter((obj) => {
        return obj.fall == fall.value;
    });
}

const getAllUseTiems = () => {
    loading.value = true
    fall.value = ''
    refreshBt.value = true
    fallGroup.value = []
    tableData.value = []
    getUseTimes().then(res => {
        const result = res.data.data
        Object.keys(result).forEach(key => {
            result[key].forEach(obj => {
                obj.fall = key
            })
            tableData.value.push(...result[key])
            fallGroup.value.push({ label: key, value: key })
        });
        tableData.value.sort((a, b) => {
            // return a.score - b.score; 
            return b.score - a.score;
        })
        tableDataCopy.value = tableData.value
    })
    loading.value = false
    setTimeout(function () {
        refreshBt.value = false
    }, 1000);

}
</script>
<style scoped>
.contentBox {
    margin: 10px 90px;
}
</style>